<template>
  <div class="team-manage-table flex flex-column">
    <common-table
      class="flex-auto-height"
      ref="tableRef"
      row-key="id"
      :show-toolbar="false"
      :show-index-column="false"
      :dataSource="tableList"
      :columns="columns"
      :pagination="false"
      :checkboxConfig="{ checkField: 'isChecked' }"
      @checkbox-all="selectChangeEvent"
      @checkbox-change="selectChangeEvent"
    >
      <template #table-checkbox>
        <vxe-column type="checkbox" width="60" align="center" />
      </template>
    </common-table>
    <div class="flex-fixed" style="padding: 10px">
      <a-button :loading="loading" @click="sendMsg">调度</a-button>
    </div>
  </div>
</template>

<script>
import get from 'lodash-es/get.js';
import find from 'lodash-es/find.js';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { isInCircle } from '../js/range-circle';
import {
  callVideoConferencing,
  getVideoConferencingRoomId,
  showVideoConferencingDialog,
} from '@gis/lib/components/tx-webrtc/index.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { getLngLat } from '@gis/lib/components/AMap/js/AMapUtils.js';
import { bdToGd } from '../../../components/gis-map/js/translator.js';

export default {
  name: 'team-manage-table',
  mixins: [areaCodeMixin],
  components: { CommonTable },
  props: {
    modelValue: { type: Object, default: undefined },
    peopleList: { type: Array, default: () => [] },
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100,
        },
        {
          title: '电话',
          dataIndex: 'phone',
          width: 120,
        },
        {
          title: '类型',
          dataIndex: 'type_name',
        },
      ],
      tableList: [],
      selectedRowKeys: [],
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(data = {}) {
        if (!data || !data.center || !data.radius) {
          this.tableList = [];
          return;
        }
        // 人员列表里面去筛选
        this.tableList = this.peopleList
          .filter((item) => {
            let lngLat = getLngLat(item);
            lngLat = bdToGd(lngLat.lng, lngLat.lat);
            return isInCircle(lngLat, data.center, data.radius, this.$attrs.AMap);
          })
          .map((item) => Object.assign({}, item, { isChecked: true })); // 默认选中

        const selectIds = this.tableList.map((item) => item.id);
        this.onTableRowSelect({ selectedRowKeys: selectIds });
        this.updateLastDispatchControl(selectIds);
      },
    },
  },
  methods: {
    selectChangeEvent(data) {
      this.selectedRowKeys = get(data, 'records', []).map((item) => item.id);
    },
    async sendMsg() {
      if (!this.selectedRowKeys || !this.selectedRowKeys.length) {
        return this.$message.error('请至少选择一个要通知的人');
      }
      this.loading = true;

      await Promise.all(
        this.selectedRowKeys.map((id) => {
          const data = find(this.tableList, (item) => item.id === id);
          return callVideoConferencing({
            account: data.account,
            name: data.name,
            roomId: getVideoConferencingRoomId(this.area_code),
          });
        })
      );
      showVideoConferencingDialog(getVideoConferencingRoomId(this.area_code));

      // const params = { mids: this.selectedRowKeys.join(',') };
      // const res = await this.$axios
      //   .get('/xw-microservice/xw-command-dispatch/v3/zz/people/wordCardGroupCall', {
      //     params,
      //   })
      //   .catch((error) => false);
      // if (res && res.code === 200) {
      //   this.$message.success(res.msg || '呼叫成功');
      // } else {
      //   this.$message.error(res.msg || '呼叫失败');
      // }

      this.loading = false;
    },
    async updateLastDispatchControl(peopleIds) {
      const params = { zzPeopleIds: peopleIds.join(',') };
      await this.$axios.put('/xw-microservice/xw-command-dispatch/v3/zz/people/updateLastDispatchControlTime', params);
    },
    onTableRowSelect({ selectedRowKeys = [] }) {
      this.selectedRowKeys = selectedRowKeys;
    },
  },
  setup() {
    const { area_code } = useUserInfoStore();
    return { area_code };
  },
};
</script>

<style scoped lang="less">
.team-manage-table {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
